<template>
  <!-- 内容 -->
  <div class="contentbg">
    <div class="channelpp">
      <img src="../../../assets/image/1.jpg" alt="" />
    </div>
    <!--  -->
    <div class="centernav2">
      <!--  -->
      <div class="channelleft">
        <div class="channeltitle">
          <img src="../../../assets/img/channeltitle_about.png" alt="" />
        </div>
        <div class="channelname">
          <!-- ----- -->
          <div class="focus-content" id="c1">
            <router-link to="/app/about">
              <span>-{{ $t("msg.navbar.children.aboutA") }}</span></router-link
            >
          </div>
          <div class="line1"></div>
          <div class="unfocus-content" id="c2">
            <router-link to="/app/fzlc">
              <span>-{{ $t("msg.navbar.children.aboutB") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="focus-content" id="c2">
            <router-link to="/app/wh">
              <span>-{{ $t("msg.navbar.children.aboutC") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="focus-content" id="c2">
            <router-link to="/app/ys">
              <span>-{{ $t("msg.navbar.children.aboutD") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="focus-content" id="c2">
            <router-link to="/app/zy">
              <span>-{{ $t("msg.navbar.children.aboutE") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <!-- ---- -->
          <div class="leftbanner">
            <a href="">
              <img
                src="../../../assets/phone.jpg"
                alt=""
                width="256"
                height="50"
              />
            </a>
          </div>
          <div class="leftbanner">
            <a href="">
              <img src="../../../assets/img/leftbanner2.png" alt="" />
            </a>
          </div>
        </div>
      </div>
      <div class="line2"></div>
      <!-- ----- -->
      <div class="channelright">
        <div class="location">
          <div class="hpico">
            <img src="../../../assets/img/homepageico.png" alt="" />
          </div>
          <div class="locationadd">
            {{ $t("msg.homepage") }} -{{ $t("msg.navbar.children.aboutB") }}
          </div>
        </div>
        <div class="pagecontent">
          <div v-for="(item, index) in quality.RowList" :key="index">
            <div v-html="item"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
// 接口
import { DevelopmentHistory } from "../../../api/AboutUs";
import { host, showHtml } from "../../../config/config";
import { watchSwitchLang } from "@/utils/i18n";
// 数据

// 品质承诺
let quality = reactive({
  RowList: [],
});
// 品质承诺
const developmentHistory = async () => {
  await DevelopmentHistory().then((res) => {
    let mode = localStorage.getItem("mode") || "content";
    res.data.rows.forEach((el) => {
      quality.RowList.push(showHtml(el[mode]));
    });
  });
};
watchSwitchLang(developmentHistory);
onMounted(() => {
  // 品质承诺
  developmentHistory();
});
</script>

<style lang="scss" scoped>
.contentbg {
  width: 1200px;
  overflow: hidden;
  margin: 0px auto;
  background: url(@/assets/contentbg.png);
  background-repeat: repeat-y;
  font-size: 12px;
  .channelpp {
    width: 100%;
    text-align: center;
    height: 240px;
    img {
      width: 85%;
      height: 85%;
      margin-top: 11px;
    }
  }

  //

  .centernav2 {
    width: 1000px;
    margin: 0px auto;
    overflow: hidden;
    .channelleft {
      width: 310px;
      float: left;
      overflow: hidden;
      img {
        margin: 0;
        padding: 0;
        border: none;
      }

      .channelname {
        width: 262px;
        overflow: hidden;
        margin: 16px auto;
        .focus-content {
          width: 262px;
          margin: 0px auto;
          height: 45px;
          line-height: 45px;
          overflow: hidden;
          font-size: 14px;
          background: url(../../../assets/img/unfocusjt.png);
          font-weight: bold;

          span {
            margin-left: 50px;
          }
        }
        .line1 {
          width: 262px;
          height: 1px;
          font-size: 1px;
          overflow: hidden;
          background: url(../../../assets/img/line.gif);
          margin: 0px auto;
        }
        .unfocus-content {
          width: 262px;
          margin: 0px auto;
          height: 45px;
          line-height: 45px;
          overflow: hidden;
          font-size: 14px;
          background: url(../../../assets/img/focusjt.png);
          font-weight: bold;

          span {
            margin-left: 50px;
          }
        }
        .leftbanner {
          width: 100%;
          margin: 12px auto;
          text-align: center;
          img {
            margin: 0;
            padding: 0;
            border: none;
          }
        }
      }
    }
    .line2 {
      height: 400px;
      width: 30px;
      overflow: hidden;
      float: left;
      background: url(../../../assets/img/line2.jpg);
      background-repeat: no-repeat;
      background-position: top center;
    }
    .channelright {
      width: 660px;
      float: left;
      overflow: hidden;
      .location {
        width: 90%;
        height: 30px;
        line-height: 30px;
        background: #f6f5fe;
        margin: 12px auto;
        .hpico {
          width: 10%;
          height: 30px;
          text-align: center;
          float: left;
        }
        .locationadd {
          width: 90%;
          float: left;
          height: 30px;
          text-align: left;
        }
      }
      .pagecontent {
        width: 85%;
        font-size: 13px;
        margin: 35px auto;
        overflow: hidden;
        line-height: 30px;
        color: #333;
        text-align: left;
        div {
          text-align: left;
        }
        p {
          width: 100%;
          text-indent: 2em;
          text-align: left;
          margin-bottom: 12px;
        }
      }
    }
  }
}
</style>
